<template>




    <div class="max">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <!--        <el-form-item label="数据库名称">
                <el-select v-model="formInline.databaseId" placeholder="数据库名称">
               <el-option v-for="item in DataBases" :key="item.databaseid" :label="item.databasename" :value="item.databaseid"> </el-option>
                </el-select>
            </el-form-item>-->
           <!-- <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>-->
            </el-form>

            <div class="container">
                <div class="show"></div>
            </div>
            <div class="container">
                <div class="show1"></div>
            </div>






    </div>

</template>

<script>  window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import * as echarts from 'echarts';
import { queryOrgs, queryAppSystems, queryDataBases, queryExamples, queryFollows } from "@/api/system/generic";

import {queryStateReport2} from "@/api/diagmanage/stateReport"
import {queryWarnformwork} from "../../../api/system/formwork";

export default {
    data(){

        return {
            DataBases:[],
             formInline: {
                databaseId:''
            },
            qs5:[],
            qd5:[],
            qm5:[],
            ss5:[],
            sd5:[],
            sm5:[],


        }

    },
    methods:{

                    onSubmit(){
                        this.getList(this.formInline)
                    },

                    initCharts(){
                    const myChart = echarts.init(document.querySelector('.show'))

                        const option = {
                            title: {
                                text: '问题占比',
                                //subtext: '业界情况分析',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                /*
                                    显示信息的格式
                                    {a}:数据系列名称 对应 数据系列 name属性
                                    {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                                    {c}:数值 对应 数据系列中data属性中每个对象的value属性
                                    {d}:根据数据值自动计算出的百分比
                                */
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                /* 此处表示图例纵向排列 */
                                orient: 'vertical',
                                /* 图例显示的左侧 */
                                left: 'left',
                                /* 各个数据对应数据系列中data中的name属性值 */
                                data: ['0-5', '6-10', '大于10']
                                /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
                            },
                            series: [
                                {
                                    name: '问题',
                                    type: 'pie',
                                    data: [



                                        { value: this.qm5[0], name: '0-5' },
                                        { value: this.qd5[0], name: '6-10' },
                                        { value: this.qs5[0], name: '大于10' },



                                    ],

                                    avoidLabelOverlap: false,
                                                    label: {
                                                        normal: {
                                                            show: false,
                                                        },
                                                    },
                                                    labelLine: {
                                                        normal: {
                                                            show: false
                                                        }
                                                    },
                                }
                            ]
                    }

                    myChart.setOption(option)

                },
                initCharts1(){
                    const myChart = echarts.init(document.querySelector('.show1'))

                        const option = {
                            title: {
                                text: '严重问题占比',
                                //subtext: '业界情况分析',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                /*
                                    显示信息的格式
                                    {a}:数据系列名称 对应 数据系列 name属性
                                    {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                                    {c}:数值 对应 数据系列中data属性中每个对象的value属性
                                    {d}:根据数据值自动计算出的百分比
                                */
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                /* 此处表示图例纵向排列 */
                                orient: 'vertical',
                                /* 图例显示的左侧 */
                                left: 'left',
                                /* 各个数据对应数据系列中data中的name属性值 */
                                   data: ['0-5', '6-10', '大于10']
                                /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
                            },
                            series: [
                                {
                                    name: '严重问题',
                                    type: 'pie',
                                    data: [
                                        { value: this.sm5[0], name: '0-5' },
                                        { value: this.sd5[0], name: '6-10' },
                                        { value: this.ss5[0], name: '大于10' },


                                    ],

                                    avoidLabelOverlap: false,
                                                    label: {
                                                        normal: {
                                                            show: false,
                                                        },
                                                    },
                                                    labelLine: {
                                                        normal: {
                                                            show: false
                                                        }
                                                    },
                                }
                            ]
                    }

                    myChart.setOption(option)

                },
                  getList(){

                        this.qs5=[]
                        this.qd5=[]
                        this.qm5=[]
                        this.ss5=[]
                        this.sd5=[]
                        this.sm5=[]


                        queryStateReport2(this.formInline).then(res=>{

                            let list = res.data
                          console.log("一眼顶针" ,list)
                            list.forEach(e => {
                              console.log("一眼顶针2.0" ,e.state === "3")
                              if(e.state === "3"){
                                /** 只看已经巡检的 **/
                                if(e.questionCount<5&&e.questionCount!=0){
                                  //this.qm5.push("1")
                                  if(this.qm5.length>0){
                                    this.qm5[0] = this.qm5[0] + e.questionCount
                                  }else {
                                    this.qm5[0] = e.questionCount;
                                  }

                                }else if(e.questionCount>=5&&e.questionCount<10){

                                  if(this.qd5.length>0){
                                    this.qd5[0] = this.qd5[0] + e.questionCount
                                  }else {
                                    this.qd5[0] = e.questionCount;
                                  }
                                }else{


                                }
                                if(e.seriousCount<5&&e.questionCount!=0){

                                  if(this.sm5.length>0){
                                    this.sm5[0] = this.sm5[0] + e.questionCount
                                  }else {
                                    this.sm5[0] = e.questionCount;
                                  }
                                }else if(e.seriousCount>=5&&e.seriousCount<=10){

                                  if(this.sd5.length>0){
                                    this.sd5[0] = this.sd5[0] + e.questionCount
                                  }else {
                                    this.sd5[0] = e.questionCount;
                                  }
                                }else{

                                }
                              }

                              /** 2023 10 08  复杂的该法  **/

                            });

                        this.initCharts()
                        this.initCharts1()

                        })
                  }



    },
    created(){
         this.getList()
    },




    mounted(){


         queryDataBases().then(response => {
                this.DataBases=response.data
             });
    }







}
</script>

<style scoped>
.container{
    width: 1830px;
    display: flex;
    margin-right: 50px;
    overflow-x: auto;

  }
  .show{
     width: 800px;
    height: 700px;
   margin-right: 50px;
   margin-left: 20px;


  }
  .show1{
     width: 800px;
    height: 700px;
   margin-right: 50px;
   margin-left: 20px;


  }
  .max{
    margin-left: 200px;
  }
</style>
